<template>
  <div>
    <el-card class="TopCard" style="height:30px">
    <!-- 小喇叭 -->
    <!-- <i class="el-icon-chat-dot-round" style="color:#606266"/> -->
    <img class="noticeImg" src="../../assets/home/notice.png" alt="">
    <!-- <span class="tips">公告：</span> -->
    <!-- 滚动文字外层div，文字能展示的区域-->
    <div class="noticeBox" :style="'width:'+noticeWidth+'px;height:26px;line-height:26px;position:relative;overflow:hidden;display:inline-block;vertical-align:middle'">
      <!-- 滚动div，marginLeft变化-->
      <div :style="'margin-left:'+marginLeft+'px;white-space:nowrap'">
        <span class="showNotice">{{showNotice}}</span>
        <!-- 不会展示，用来测量第二条与第一条重合时的长度 -->
        <span class="notice">{{notice}}</span>
      </div>
    </div>
  </el-card>
  </div>
</template>

<script  setup lang="ts">
      // 公告
      const noticeData = ref([])
      // 适应屏幕分辨率
      const noticeWidth = ref(window.screen.width - 100)
      // 公告展示（过长时会重复两遍）
      const showNotice = ref('')
      // 用于公告过长时，获取重复两遍中第一遍的长度
      const notice = ref()
      // 公告初始位置
      const marginLeft = ref(100)
      const timer = ref()
onMounted(()=>{ 
  noticeData.value = ['欢迎使用开放蓝天', '开放蓝天即将上线开放蓝天即将上线开放蓝天即将上线开放蓝天即将上线开放蓝天即将上线开放蓝天即将上线开放蓝天即将上线开放蓝天即将上线']
  noticeData.value.forEach((val, index) => {
    if (index === 0) {
      showNotice.value += '公告' + (index + 1) + '：' + val
      // showNotice.value +=  val
    } else {
      showNotice.value += '\xa0\xa0\xa0\xa0\xa0\xa0公告' + (index + 1) + '：' + val
      // showNotice.value += '\xa0\xa0\xa0\xa0\xa0\xa0' +  val
    }
  })
  // 公告上面先赋值，再获取宽度
  setTimeout(() => {
    // 公告div长度
    const oneNoticeDom = document.getElementsByClassName('showNotice')[0] as HTMLElement
    const oneNoticeWidth = oneNoticeDom.offsetWidth
    console.log('公告div长度', oneNoticeWidth)
    console.log('noticeWidth', noticeWidth.value, window.screen.width)
    // 公告外层div长度
    const noticeBoxDom = document.getElementsByClassName('TopCard')[0] as HTMLElement
    const noticeBoxWidth = noticeBoxDom.offsetWidth-20
    console.log('公告外层div长度', noticeBoxWidth)
    // 一条公告长度太大时，才滚动
    if (oneNoticeWidth > noticeBoxWidth) {
      console.log('开始')
      // 滚动公告需要将公告重复两遍进行滚动，两遍中间需要加空格
      notice.value = showNotice.value + '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0'
      // 上面先赋值，再获取宽度
      setTimeout(() => {
        // 获取一遍加中间空格的长度，即左移时第二遍与第一遍完全重合时的长度
        const oneNoticeAddEmptyDom = document.getElementsByClassName('notice')[0] as HTMLElement
        const oneNoticeAddEmptyWidth = oneNoticeAddEmptyDom.offsetWidth
        // 公告内容重复两遍
        showNotice.value = notice.value + showNotice.value
        timer.value = setInterval(() => {
          marginLeft.value -= 1
          // 第二遍与第一遍起始位置重合时（第一条已完全移到左侧隐藏），marginLeft置0，即回到第一条
          if (marginLeft.value === (-1) * oneNoticeAddEmptyWidth) {
            marginLeft.value = 0
          }
        }, 20)
      }, 10)
    } else { //公告并没有很长时不滚动
      marginLeft.value = 0
    }
  }, 10)
})
</script>
<style>
.TopCard {
  display: flex;
  align-items: center;
}
/* 公告card */
.TopCard .el-card__body{
  /* padding:0px 10px */
  display: flex;
  align-items: center;
}
/* 公告title */
/* .tips{
  line-height:50px;
  color:#606266;
  font-weight:bold
} */
.noticeImg {
  width: 20px;
  margin: 2px 10px 0px 10px;
}
</style>